<template>
    <a-layout id="components-layout-demo-custom-trigger">
        <!--侧边栏-->
        <a-layout-sider :trigger="null" collapsible v-model="collapsed">
            <div class="logo">
                <a-input aria-placeholder="search"/>
            </div>

            <a-menu
                    :defaultSelectedKeys="['1']"
                    mode="inline"
                    :theme="theme"
                    :inlineCollapsed="collapsed"
            >

                <template v-for="(item,index) in menuitems">
                    <a-menu-item :key="index" @click="toCMain(index)">
                        <a-icon type="pie-chart"/>
                        <span>{{item.name}}</span>
                    </a-menu-item>
                </template>
                <a-menu-item>
                    <a-icon type="pie-chart"/>
                    <span><a href="http://localhost:8081/doc.html" target="_blank" style="text-decoration: none;color: white">文档</a></span>
                </a-menu-item>
            </a-menu>

        </a-layout-sider>
        <!--主体部分-->
        <a-layout>
            <a-layout-header style="background: #fff; padding: 0">
                <div>
                    <a-row>
                        <a-col :span="1">
                            <a-icon
                                    class="trigger"
                                    :type="collapsed ? 'menu-unfold' : 'menu-fold'"
                                    @click=" collapsed = !collapsed"
                            />
                        </a-col>
                        <a-col :span="1">
                            <a-switch defaultChecked @change='onChange'/>
                        </a-col>
                        <a-col offset="8" :span="4">
                            <span :style="{fontSize:'20px',fontWeight:'bold'}">{{menuitems[currentIndex].name}}</span>
                        </a-col>

                    </a-row>
                </div>

            </a-layout-header>
            <a-layout-content :style="{ margin: '24px 16px', padding: '24px', background: '#fff', minHeight: '800px' }">
                <router-view name='cmain'></router-view>
            </a-layout-content>
        </a-layout>

    </a-layout>
</template>

<script>
    import ALayoutSider from "ant-design-vue/es/layout/Sider";
    import ARow from "ant-design-vue/es/grid/Row";
    import ACol from "ant-design-vue/es/grid/Col";

    export default {
        name: "Layout",
        components: {ACol, ARow, ALayoutSider},
        data() {
            return {
                collapsed: false,
                menuitems: [
                    {
                        name: 'jvm状态',
                        url: '/main/jvm'
                    },
                    {
                        name: "redis集群状态",
                        url: '/main/redis',
                    },
                    {
                        name: "缓存相关",
                        url: '/main/cache'
                    },
                ],
                currentIndex: 1,
                theme: "dark"
            }
        },
        methods: {
            onChange() {
                if (this.theme == "dark") {
                    this.theme = "light"
                } else {
                    this.theme = "dark"
                }
            },
            toCMain(index) {
                this.currentIndex = index;
                let currentUrl = this.menuitems[index].url;
                this.$router.push(currentUrl);
            }

        }
    }
</script>

<style scoped>

    #components-layout-demo-custom-trigger .trigger {
        font-size: 18px;
        line-height: 64px;
        padding: 0 24px;
        cursor: pointer;
        transition: color .3s;
    }

    #components-layout-demo-custom-trigger .trigger:hover {
        color: #1890ff;
    }

    #components-layout-demo-custom-trigger .logo {
        height: 32px;
        background: rgba(255, 255, 255, .2);
        margin: 16px;
    }

</style>